<template>
    <div class="header">
        <div class="title" title="ToDoList">
            ToDoList
        </div>
        <div class="toggle-animation" @click="toastShow = !toastShow">
            <img src="../../assets/toggle.svg" alt="">
        </div>
    </div>
    <Teleport to="body">
        <transition enter-active-class="animate__animated animate__backInDown"
            leave-active-class="animate__animated animate__backOutDown">
            <ToggleAnimationToast @change-animate="changeAnimateHandler" @close="toastShow=false" v-if="toastShow" />
        </transition>
    </Teleport>
</template>
<script setup  lang="ts">
import ToggleAnimationToast from './ToggleAnimationToast.vue';
import { ref, reactive, onMounted } from 'vue';
import { nanoid } from 'nanoid';
import { setLocalStorageData, getLocalStorageData } from '../../../utils/local';
import 'animate.css'
type List = {
    aid: string,
    leaveClass: string,
    enterClass: string,
    name: string
}
type Animation = {
    current: number,
    lists: Array<List>
}

const animations = reactive<Animation>({
    current: 0,
    lists: [
        { aid: nanoid(), leaveClass: 'animate__backOutDown', enterClass: 'animate__backInLeft', name: '默认动画' },
        { aid: nanoid(), leaveClass: 'animate__hinge', enterClass: 'animate__bounceIn', name: '动画1' }
    ]
})
const toastShow = ref(false)
const changeAnimateHandler = (index: number) => {
    animations.current = index
    setLocalStorageData('animations', animations)
}

/**
 * 设置动画数据
 */
const setAnimateData = () => {
    if (getLocalStorageData('animations')?.lists?.length) return
    setLocalStorageData('animations', animations)
}
onMounted(() => {
    setAnimateData()
})
</script>
<style lang="less" scoped>
.header {
    width: 100%;
    text-align: center;
    position: relative;

    .toggle-animation {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        right: 0;
        right: 2rem;
    }

    .title {
        font-size: 3rem;
        font-weight: bold;
        display: inline-block;
        background: linear-gradient(to right, #acb6e5 0%, #ee9ca7 100%);
        -webkit-background-clip: text;
        color: transparent;
        user-select: none;
        position: relative;
    }
}
</style>